<template>
  <div :style="styleSheet">
    <slot>13</slot>
  </div>
</template>
<script>
export default {
  props: {
    styles: {
      type: Object,
    },
  },
  computed: {
    activeHeight: function () {
      var docElement = document.documentElement;
      var clientHeight = docElement.clientHeight;
      var clientWidth = docElement.clientWidth;
      if (!clientWidth) return;
      var fontSize = 20 * (clientWidth / 320);

      if (this.$route.meta.isShowNav) {
        clientHeight -= 3.2 * fontSize;
      }
      if (this.$route.meta.isShowTab) {
        clientHeight -= 3.2 * fontSize;
      }
      return clientHeight / fontSize + "rem";
    },
    styleSheet: function () {
      return {
        marginTop: this.$route.meta.isNav ? "3.2rem" : "0px",
        marginBottom: this.$route.meta.isTab? "3.2rem" : "0px",
        // height:this.activeHeight,
        ...this.styles,
        overflow: "auto",
      };
    },
  },
};
</script>
<style lang="scss" scoped>
// div{
//     height: 80vh;
// }
</style>
 npm create  vue_echarts